<template>
    <div class="upheadimg">
        <topnav>
            <span>更换头像</span>
        </topnav>
        <div class="headimg">
            <div class="img">
                <!-- <img :src="imgsrc" alt="上传头像" /> -->
                <img v-if="!imgsrc" src="../assets/imgs/headimg1.jpg" />
                <img v-else :src="imgsrc" />
                <input ref="himg" type="file" @change="headimg" />
            </div>
            <img :src="imgsrctwo" title="预览图" />
        </div>
    </div>
</template>

<script>
// import axios from 'axios';
import { ref, computed } from 'vue';
import { useStore } from 'vuex';
import Topnav from '../components/public/Topnav.vue';

export default {

  components: {
    Topnav,
  },
  setup() {
    const Store = useStore();
    const himg = ref('');
    const imgsrctwo = ref('');
    const imgsrc = computed(() => Store.state.basicinfor.userinfor.headimg);
    // 读取文件
    function headimg() {
      // 读取文件的对象
      const readimg = new FileReader();
      // base64文件
      readimg.readAsDataURL(himg.value.files[0]); 
      // 二进制文件,文件流缓冲区
      // readimg.readAsArrayBuffer(himg.value.files[0]);
      // 字符串文件
      // readimg.readAsText(himg.value.files[0]);
      // 当文件读取完成
      readimg.onload = (avl) => {
        imgsrctwo.value = avl.target.result;
        // 获取token值
        // const token = JSON.parse(window.sessionStorage.getItem('token'));

        // axios({
        //   method: 'post',
        //   url: 'http://1.14.122.88:5001/image/upimage',
        //   headers: {
        //     authorization: token,
        //     'Content-Type': 'image/jpeg;image/jpg;image/png;image/gif',
        //   },
        //   data: avl.target.result,
        // }).then(
        //   (response) => {
        //     console.log(response.data);
        //   },
        //   (error) => {
        //     console.log(error.message);
        //   },
        // );
      };
    }

    return {
      imgsrc,
      himg,
      headimg,
      imgsrctwo,
    };
  },
};
</script>

<style scoped>
    .headimg{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 400px;
        background-color: #28C8FF;
    }
    .img{
        position: relative;
    }
    .img img{
        position: absolute;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: #ffffff;
        /* 事件穿透,触发下层事件 */
        pointer-events: none;
    }
    .img input{
        width: 100px;
        height: 100px;
        border-radius: 50%;
    }
</style>
